<!--
 * @Author: your name
 * @Date: 2020-08-22 01:51:42
 * @LastEditTime: 2020-08-27 19:50:39
 * @LastEditors: 王娆
 * @Description: In User Settings Edit
 * @FilePath: \exam-list\src\components\checkpaper\PaperDetail.vue
-->
<template>
<!--用户列表 -->
<div>
  <h3>用户展示</h3>
  <el-tabs v-model="activeName" type="card">
    <el-tab-pane label="用户数据" name="first" stretch='true'>
      <h2>用户数据</h2>
      <el-table style="width: 100%" :data="userInfo">
        <el-table-column prop="user_name" label="用户名">
        </el-table-column>
        <el-table-column prop="user_pwd" label="密码">
        </el-table-column>
        <el-table-column prop="identity_text" label="身份" align='center'>
        </el-table-column>
      </el-table>
    </el-tab-pane>
    <el-tab-pane label="身份数据" name="second">
      <h2>身份数据</h2>
      <el-card>
        <h4>身份名称</h4>
        <div v-for="item in Identity" :key="item.identity_id">
          <el-divider></el-divider>{{item.identity_text}}
        </div>
        <el-pagination layout="prev, pager, next" :total="10">
        </el-pagination>
      </el-card>
    </el-tab-pane>
    <el-tab-pane label="api接口权限" name="third">
      <h2>api接口权限</h2>
      <el-table :data="port" style="width: 100%">
        <el-table-column prop="api_authority_text" label="api权限名称">
        </el-table-column>
        <el-table-column prop="api_authority_url" label="api权限url">
        </el-table-column>
        <el-table-column prop="api_authority_method" label="地址">
        </el-table-column>
      </el-table>
    </el-tab-pane>
    <el-tab-pane label="身份和api接口关系" name="fourth">
      <h2>身份和api接口关系</h2>
      <el-table :data="power" style="width: 100%">
        <el-table-column prop="identity_text" label="身份名称">
        </el-table-column>
        <el-table-column prop="api_authority_text" label="api权限名称">
        </el-table-column>
        <el-table-column prop="api_authority_url" label="api权限url">
        </el-table-column>
        <el-table-column prop="api_authority_method" label="api权限方法">
        </el-table-column>
      </el-table>
    </el-tab-pane>
    <el-tab-pane label="视图接口权限" name="five">
      <h2>视图接口权限</h2>
      <el-table style="width: 100%" :data="view">
        <el-table-column prop="view_authority_text" label="视图权限名称">
        </el-table-column>
        <el-table-column prop="view_authority_id" label="视图id">
        </el-table-column>
      </el-table>
    </el-tab-pane>
    <el-tab-pane label="身份和视图权限关系" name="six">
      <h2>身份和视图权限关系</h2>
      <el-table style="width: 100%" :data="relation">
        <el-table-column prop="identity_text" label="身份">
        </el-table-column>
        <el-table-column prop="view_authority_text" label="视图名称">
        </el-table-column>
        <el-table-column prop="view_id" label="视图id">
        </el-table-column>
      </el-table>
    </el-tab-pane>
  </el-tabs>
</div>
</template>

<script>
import {
  mapActions,
  mapState
} from 'vuex'
export default {
  data() {
    return {
      activeName: 'first',
    };
  },
  computed: {
    ...mapState('ShowUser', ['userInfo', 'Identity', 'port', 'power', 'view', 'relation'])
  },
  methods: {
    ...mapActions('ShowUser', ['getuser', 'getIdentity', 'getPort', 'getPower', 'getView', 'getrelation'])
  },
  created() {
    this.getuser(),
      this.getIdentity(),
      this.getPort(),
      this.getPower(),
      this.getView(),
      this.getrelation()
  }
}
</script>

<style scoped>
.el-pagination {
  display: flex;
  justify-content: flex-end;
}
</style>
